<template>
    <div class="add-attribute">
        <Form :label-width="80">
            <FormItem label="当前所选" v-if="objGroup">
                <Tag type="dot" closable color="blue">{{objGroup.label}}</Tag>
                <Tag type="dot" closable color="green" v-if="objKey">{{objKey.name}}</Tag>
                <Tag type="dot" closable color="yellow" v-if="objValue">{{objValue.name}}</Tag>
            </FormItem>
            <FormItem label="属性分类">
                <Select v-model="group" style="width:200px">
                    <Option v-for="item in attributeGroup" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>
            <FormItem label="属性类型" v-if="attributeKey.length > 0">
                <RadioGroup v-model="key">
                    <Radio :label="v.id" :key="k" v-for="(v,k) in attributeKey">
                        <span>{{v.name}}</span>
                    </Radio>
                </RadioGroup>
            </FormItem>
            <FormItem label="属性值项" v-if="attributeValue.length > 0">
                <RadioGroup v-model="value">
                    <Radio :label="v.id" :key="k" v-for="(v,k) in attributeValue">
                        <span>{{v.name}}</span>
                    </Radio>
                </RadioGroup>
            </FormItem>
        </Form>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                attributeGroup:[],
                attributeKey:[],
                attributeValue:[],
                group:'',
                key:'',
                value:''
            }
        },
        computed:{
            objGroup(){
                for(let v of this.attributeGroup){
                    if(this.group === v.value){
                        return v;
                    }
                }
            },
            objKey(){
                for(let v of this.attributeKey){
                    if(this.key === v.id){
                        return v;
                    }
                }
            },
            objValue(){
                for(let v of this.attributeValue){
                    if(this.value === v.id){
                        return v;
                    }
                }
            }
        },
        methods: {
            getGoodsAttributeGroup () {
                const self = this;
                this.$http.getGoodsAttributeGroup().then(res => {
                    if(res.success === true) {
                        self.attributeGroup = res.data;
                    }
                }, error => {
                })
            },
            getGoodsAttributeKey (val) {
                const self = this;
                this.$http.getGoodsAttributeKey(val).then(res => {
                    if(res.success === true) {
                        self.attributeKey = res.data;
                    }
                }, error => {
                })
            },
            getGoodsAttributeValue (val) {
                const self = this;
                this.$http.getGoodsAttributeValue(val).then(res => {
                    if(res.success === true) {
                        self.attributeValue = res.data;
                    }
                }, error => {
                })
            }
        },
        watch:{
            objGroup:function(val){
                const data = {
                    group:val.value
                }
                this.getGoodsAttributeKey(data);
            },
            key:function(val){
                const data = {
                    key:val
                }
                this.getGoodsAttributeValue(data);
            },
            value:function(val){
                const data = {
                    key:this.key,
                    value:val
                }
                this.$emit('change',data)
            }
        },
        created () {
            this.getGoodsAttributeGroup()
        }
    }
</script>